<template>
  <ul class="alphabet" ref="wrapper">
    <li class="letter"
      v-for="item of letters"
      :key="item"
      :ref="item"
      @click="handleClick"
      @touchstart="touchstart"
      @touchmove="touchmove"
      >{{item}}</li>
  </ul>
</template>
<script>
import { throttle } from '@/assets/js/util.js'
export default {
  name: 'alphabet',
  props: {
    letters: Array
  },
  data () {
    return {
      startY: 0
    }
  },
  methods: {
    touchstart (e) {
      console.log('touchstart', e)
    },
    handleClick (e) {
      this.$emit('change', e.target.innerText)
    },
    touchmove (e) {
      let self = this
      throttle(function () {
        let Y = e.touches[0].clientY
        let startY = self.$refs['wrapper'].offsetTop + self.$refs['A'][0].offsetTop
        let index = Math.floor((Y - startY) / self.$refs['A'][0].offsetHeight)
        if (index >= 0 && index < self.letters.length) {
          self.$emit('change', self.letters[index])
        }
      }, 200)()
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables'
.alphabet
  position absolute
  right 0
  top 100px
  bottom 0
  display flex
  justify-content center
  flex-direction column
  width 20px
  font-size 20px
  .letter
    text-align center
    color $bgColor
</style>
